<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

<div class="main_info">
    <div class="box_full">
        <span> 【M】 <a class="top_nav" data-url="/sys/func/list">功能模块管理</a>
            <a class="top_nav" th:each="parent:${parentStack}"  data-th-data-url="'/sys/func/childs/'+${parent.id}"
               th:text="' -- '+${parent.funcName}">用户管理</a>
        </span>
        <br/>
        <div class="float-right">
            <button onclick="editer('/sys/func/edit_box/-1');" class="layui-btn layui-btn-xs">+顶层功能</button>
        </div>
        <table width="100%" id="moudleTable" class="layui-table" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th width="6%">节点ID</th>
                <th>名称</th>
                <th width="40%">功能URL</a></th>
                <th width="10%">开|关</th>
                <th width="10%">菜单(显示)</th>
                <th width="5%">排序</a></th>
                <th width="15%">操作</a></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="func:${funcList}" data-th-id="${func.id }" data-th-pid="${func.parentId}">
                <td width="6%" th:text="${func.id}">节点ID</td>
                <td><i th:if=${func.hasChilds} class="layui-icon layui-tree-spread"></i>
                    <a class="show_childs" href="#" data-th-data-haschilds="${func.hasChilds}" data-th-data-url="'/sys/func/childs/'+${func.id}" th:text="${func.funcName}"></a>
                </td>
                <td width="40%" th:text="${func.funcUrl}">&nbsp;功能URL</td>
                <td width="10%"  >
                    <div class="layui-form">
                    <input type="checkbox" lay-filter="action" lay-skin="switch" lay-text="ON|OFF" data-th-data-id="${func.id}" data-th-checked="${func.action eq 1}" >
                    </div>
                </td>
                <td width="10%"  >
                    <div class="layui-form">
                        <input type="checkbox" lay-filter="menu" lay-skin="switch" lay-text="ON|OFF" data-th-data-id="${func.id}" data-th-checked="${func.isMenu eq 1}" >
                    </div>
                </td>
                <td width="5%" th:text="${func.sequence}">排序</td>
                <td width="15%">
                    <div class="layui-btn-group">
                        <button data-edit="/sys/func/edit_box/-1" class="func_edit layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                        <button data-th-data-edit="'/sys/func/edit_box/'+${func.id}" class="func_edit layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                        <button data-th-data-edit="'/sys/func/perm_box/'+${func.id}" class="prem_edit layui-btn layui-btn-sm"><i class="layui-icon">权</i></button>
                        <button data-th-data-edit="'/sys/func/del/'+${func.id}" class="func_del layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                    </div>
                </td>
            </tr>
            </tbody>
         </table>
    </div>
</div>
<script>
    var layform;
    layui.use(['form'], function () { // 加载 layui的功能模块
        layform = layui.form;
        layform.render("checkbox"); // 重新渲染 checkbox

        layform.on('switch(action)', function(obj){ // switch 点击事件
            // 获取当前控件
            var id = $(obj.elem).data('id');
            if(obj.elem.checked == true) {//是主键
                mySubmit("/sys/func/on/" + id);
            }else {
                mySubmit("/sys/func/off/" + id);
            }
        });

        layform.on('switch(menu)', function(obj){ // switch 点击事件
            // 获取当前控件
            var id = $(obj.elem).data('id');
            if(obj.elem.checked == true) {//是主键
                mySubmit("/sys/func/ismenu/" + id+"?onOff=1");
            }else {
                mySubmit("/sys/func/ismenu/" + id+"?onOff=0");
            }
        });

    });

    $(".top_nav").click(function (e) {
        var url = $(this).data('url');
//        console.log(url);
        pageTo(url);
    }) ;
    $(".show_childs").click(function (e) {
        var url = $(this).data('url')+"?&t="+new Date().getTime();
        var hasChilds = $(this).data('haschilds');
        console.log(url);
        if(hasChilds){
            pageTo(url);
        }
    }) ;

    var pageTo = function (url) {
//        console.log(url);
        route(url);  // URL 发送到路由
    }

    $(".func_edit").click(function (e) {
        var url = $(this).data('edit')+"?&t="+new Date().getTime();;
        console.log(url);
        editer(url,'新增或编辑功能菜单');
    }) ;

    $(".prem_edit").click(function (e) {
        var url = $(this).data('edit')+"?&t="+new Date().getTime();;
        console.log(url);
        editer(url,'分配权限给角色');
    }) ;

    $(".func_del").click(function (e) {
        var url = $(this).data('edit')+"?&t="+new Date().getTime();;
        console.log(url);
        toDel(url);
    }) ;





</script>

